<template>
    <div>
        <el-row class="bg-top" style="display: none;">
            <el-col :span="24">
               
            </el-col>
        </el-row>
        <el-row class="bg-middle">
		<div class="homeTuStList1">
            <div class="upstreamTitleText">对位隔离状态显示</div>
            <div class="relayBox">
                <el-col class="relay-list">
                    <div class="relayListContent">
						<div class="relay-dis">
							<div class="relayListContent-Box1" :class="ibpControl==0?'boxColor1':''">自动</div>
							<div class="relayListContent-Box1" :class="ibpControl==1?'boxColor1':''">手动</div>
						</div>
                    </div>
                </el-col>
				<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
								<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
				<el-col class="relay-list">
				</el-col>
            </div>
			</div>
        </el-row>
		<div class="tipContent" v-if="tipStatus">
				  <div class="tipsTxt">
					  <div class="merquee">
					  	<span class="merquee-txt">{{msg}}</span>
					  </div>
					  <!-- <marquee :val="msg"></marquee> -->
				    </div>
		</div>
		<el-row class="bg1" style="height: auto">
			<el-col :span="24">
			<div class="homeTuStList1">
				<h3 class="baseHeader" style="text-align: center">对位隔离第一次确认</h3>
				<div class="baseInfo" style="height: auto; align-items: flex-start;margin-left:10%">
						<el-button class="btn1" style="width:90px"  type="success" @click="firstSet(0)">自动
						</el-button>
						<el-button class="btn1" style="width:90px" type="success" @click="firstSet(1)">手动
						</el-button>
					</el-form>
				</div>
				</div>
			</el-col>
		</el-row>
		<el-row class="bg1" style="height: auto">
			<el-col :span="24">
			<div class="homeTuStList1">
				<h3 class="baseHeader" style="text-align: center">对位隔离第二次确认</h3>
				<div class="baseInfo" style="height: auto; align-items: flex-start;margin-left:10%">
						<el-button class="btn1" style="width:90px"  type="success" @click="secondSet(0)">自动
						</el-button>
						<el-button class="btn1" style="width:90px"  type="success" @click="secondSet(1)">手动
						</el-button>
					</el-form>
				</div>
				</div>
			</el-col>
		</el-row>
    </div>
</template>

<script>
export default {
	 inject: ["reload"],
    data () {
        return {
		   tipStatus:false,
		   msg:'',
           ibpControl:-1,
		   dataForm: {
		   	ops: "",
		   },
		   stationOptions: [{
		   		value: 0,
		   		label: "上行",
		   	},
		   	{
		   		value: 1,
		   		label: "下行",
		   	},
		   	{
		   		value: 2,
		   		label: "上下行",
		   	},
		   ], //上下行
        }
    },
	computed: {
		dataRule() {
			return {
				slide: [{
					required: true,
					message: "站台侧不为空",
					trigger: "blur"
				}],
			};
		}
	},
	mounted (){
		window.addEventListener('onmessageWS', this.getSocketData)
	},
	destroyed() {
		window.removeEventListener('onmessageWS',this.getSocketData)
	},
	activated() {
		this.init()
	},
	beforeDestroy() {
		window.clearTimeout()
	},
    methods: {
		//关门
		firstSet(id) {

				// console.log(obj, '开关门测试')
				this.$http.get("/psc/isolation/firstSetMode?isAuto="+id).then((res) => {
					if (res.data.code !== 0) {
						return this.$message.error(res.data.msg);
					}
					this.$message({
						message: this.$t("sucess:"+res.data.data),
						type: "success",
						duration: 3000,
						onClose: () => {},
					});
				});
			
		},
		secondSet(id) {
					
				// console.log(obj, '开关门测试')
				this.$http.get('/psc/isolation/secondSetMode?isAuto='+id).then((res) => {
					if (res.data.code !== 0) {
						return this.$message.error(res.data.msg);
					}
					this.$message({
						message: this.$t("sucess:"+res.data.data),
						type: "success",
						duration: 3000,
						onClose: () => {},
					});
				});
			
		},
		getSocketData(res){
			if (res.detail.data){
				this.init()
			}
		},
		init() {
			this.$nextTick(()=>{
				this.handleMsg()
			})
			
		},
	    //接收websocket数据
	    handleMsg() {
			setTimeout(()=>{
				this.$globalWebSocket.ws.send("psc");
				this.$globalWebSocket.ws.onmessage = this.getMessage
			},200)
	    },
		//获取websocket数据
		getMessage(e) {
			var message = JSON.parse(e.data)
			if(message.taskStatus==3){
				this.taskStatus = 3
				//都断开A B 同时宕机
				this.tipStatus =true
				this.msg = 'PEDC命令断开,正在重新连接'
				// Cookies.set('taskStatus',message.taskStatus)
			}else{
				this.taskStatus = 0
				//正常的
				this.tipStatus = false
			}
			// 上行继电器
			this.ibpControl =  message.upLink.sysPscCenterControlPanel.isolationMode //
			// 下行继电器
		}
		
    }
}
</script>

<style scoped>
    .bg-top{
        height: 12.8vh;
		min-height: 124px;
        padding: 1.3vh 1.35vw 1.3vh 1.35vw;
        border-radius: 10px;
        background-color: #ffffff;
    }
    .system{
        display: flex;
    }
    .titleText{
        width: 1.1vw;
        font-size: 20px;
        font-weight: 700;
        color: #2A82E4;
    }
    .systemFailure{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 1.1vh 0 1.1vh 0;
        margin-left: 2.6vw;
    }
    .systemFailure-list{
        display: flex;
        align-items: center;
        width: 15.6vw;
        height: 50%;
        margin-right: 1.56vw;
    }
    .systemFailure-list2{
        padding: 6px 0 6px 0;
        box-sizing: border-box;
        margin-right: 6px;
        height: 50%;
		display: flex;
		align-items: center;
    }
    .systemFailure-list2 span{
        font-size: 16px;
    }

    .dot{
        display: inline-block;
        width: 1vw;
        height: 1vw;
        margin-right: 0.52vw;
        border-radius: 50%;
        /* background-color: #09D891; */
		/* background-image:radial-gradient(#fff, #09D891,#09D891); */
		background-color: rgba(166, 166, 166, 1);
    }
	.dot0,.dot1{
		display: inline-block;
		width: 1vw;
		height: 1vw;
		min-width: 12px;
		min-height: 12px;
		margin-right: 0.52vw;
		border-radius: 50%;
		background-color: rgba(166, 166, 166, 1);
	}
	.dot1{
		 background-image: radial-gradient(#fff,rgba(212, 48, 48, 1),rgba(212, 48, 48, 1))!important;
	}
    .systemFailure-list span{
        font-size: 18px;
    }


    .bg-middle{
        /* height: 25.3vh; */
		/* min-height: 246px; */
        border-radius: 10px;
        background-color: #ffffff;
        /* margin-top: 1.8vh; */
        padding: 18px 26px;
    }
    .upstreamTitleText{
        font-size: 25px;
        color: #2A82E4;
        font-weight: 700;
		text-align: center;
		margin-top:20px;
    }
    .relayBox{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 48%;
        margin-top: 25px;
    }
    .relay-list{
        height: 150px;
    }
    .relayListContent{
       /* width: 130px;
        height: 120px; */
        margin: 0 auto;
    }
    .relayListContent p{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        text-align: center;
		margin-bottom: 0.5vh;
    }
    .relayListContent-Box1{
        width: 50px;
        height: 47x;
        line-height: 35px;
        color: #fff;
        border: 1px solid #000;
        margin: 0 auto;
        text-align: center;
    }
    .boxColor1{
        background-color: #43CF7C;
    }
    .boxColor2{
        background-color: #D43030;
    }
    .relayListContent-Box2{
        width: 44px;
        height: 35px;
        line-height: 47px;
        border: 1px solid #000;
        margin: 0 auto;
        text-align: center;
		padding: 0 10px;
    }

    .bg-bottom{
        /* height: 25.3vh; */
		/* min-height: 246px; */
        border-radius: 10px;
        background-color: #ffffff;
        margin-top: 2.1vh;
        padding: 18px 26px;
    }
	.relay-dis{
		display: flex;
		font-size: 18px;
		font-weight: 450;
		color: rgba(0, 0, 0, 1);
		width: 9vw;
		margin: 0 auto;
		text-align: center;
		margin-left: 25%;
	}
	.relay-dis>>>.relayListContent-Box1{
		width: 7.1vw;
		height: 3.2vh;
		min-height: 28px;
		margin: auto;
		color: rgba(0, 0, 0, 1);
	}
	.relay-dis>>>.relayListContent-Box1:last-child{
		border-left: none;
	}
	.relayListContent-Box2{
		width: 10.4vw;
		font-size: 18px;
		font-weight: 700;
		color: rgba(0, 0, 0, 1);
	}
	.tipContent{
		position: fixed;
		top: 0px;
		height: 50px;
		line-height: 50px;
		z-index: 999999;
		width: 50%;
		margin-left: 20%;
		text-align: center;
	}
	.tipsTxt{
		color:red;
		font-weight: 600;
		font-size: 20px;
		width: 250px;
		margin: 0 auto;
	}
	.homeTuStList1 {
	width: 17.5vw;
	height: 14vh;
	margin-right: 0.9vw;
	border-radius: 10px;
	border: 1px solid rgba(42, 130, 228, 1);
	position: relative;
}
	.tipsTxt>>>.marquee-wrap,.tipsTxt>>>.scroll{
		height: 50px;
	}
	.tipsTxt>>>.marquee,.tipsTxt>>>.copy{
		margin-top: 0!important;
		margin-bottom: 0!important;
	}
	.tipsTxt>>>.getWidth{
		margin: 0!important;
	}
	.relayListContent-Box21{
		display: flex;
		justify-content: space-around;
	}
	/* 文字滚动 */
	.merquee {
		height: 50px;
		line-height: 50px;
		box-sizing: border-box;
		word-break: break-all;
		white-space: nowrap;
		overflow: hidden;
	}
	.merquee-txt {
		display: inline-block;
		padding-left: 100%;
		/* 从右至左开始滚动 */
		animation: marqueeTransform 16s linear infinite;
	}
	 
	@keyframes marqueeTransform {
		0% {
			transform: translate(0, 0);
		}
	 
		100% {
			transform: translate(-100%, 0);
		}
	}
	
	.bg2 {
		background-color: #fff;
		border-radius: 10px;
		padding: 2.1vh 1.5vw;
		margin-top: 10px;
		height: 38.1vh;
	}
	
	.bg4 {
		height: 5vh;
		padding: 0;
		line-height: 5vh;
		padding: 0 1.5vw;
	}
	.bg1 {
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		/* height: 83.1vh; */
		/* height: 71vh; */
		padding: 2.1vh 1.5vw;
		margin-top: 10px;
	}
	@media screen  and (min-width: 1440px){
		.systemFailure-list2{
			margin-right: 10px;
		}
	}
	@media screen  and (min-width: 1280px){
		.systemFailure-list2{
			margin-right: 6px;
		}
	}
</style>